<template>
	<van-nav-bar
	  title="商品详情"
	  left-text="返回"
	  left-arrow
	  @click-left="onClickLeft"
	/>
	<div>
	  <img :src="product.picture" alt="picture" style="width: 100%" />
	  <div class="goods">
		<div class="goodsPriceLeft">
		  <p class="mingzi">{{ product.shop }}</p>
		  <p class="jiage">单价：￥{{ product.price }}</p>
		</div>
	  </div>
	  <div class="goodsPriceRight">
		<span class="daojishi">距打折结束还剩</span>
		<van-count-down millisecond :time="countDownTime" format="HH:mm:ss:SS">
		  <template #default="timeData">
			<span class="countDownTime_block">{{ timeData.hours }}</span>
			<span class="countDownTime_colon">:</span>
			<span class="countDownTime_block">{{ timeData.minutes }}</span>
			<span class="countDownTime_colon">:</span>
			<span class="countDownTime_block">{{ timeData.seconds }}</span>
		  </template>
		</van-count-down>
	  </div>
	  <!-- 用户评价，开始 -->
	  <div class="commentWrap">
		<header>
		  <span class="spanL">用户评价(3785)</span>
		  <span class="spanR">95% <em>好评></em></span>
		</header>
		<!-- 评论标签 -->
		<ul class="ulTip">
		  <li>外观不错</li>
		  <li>物流不错</li>
		  <li>手感好</li>
		  <li>包装不错</li>
		</ul>
		<!-- 用户评价，滚动 -->
		<div class="commentSwipeWrap">
		  <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
			<!-- 这里的数据是v-for循环的，现在先写死二个 -->
			<van-swipe-item>
			  <div class="userSlider">
				<!-- 用户名、头像、评价星级 -->
				<div class="userAvatar">
				  <label class="avatar">
					<img
					  src="https://res.vmallres.com/rms/comment/image/U0959/CB4336B4DD0969D633BAB4B47B61BB79BA8FFA21BD0FD9C7F734B1506F6F8206/E37954522CE343FB5B8EF0CB.jpg"
					  alt=""
					/>
				  </label>
				  <!-- 用户名 -->
				  <p class="p1">云***</p>
				  <!-- 星星 -->
				  <p class="p2">
					<van-icon color="#f00" name="star" />
					<van-icon color="#f00" name="star" />
					<van-icon color="#f00" name="star" />
				  </p>
				</div>
				<!-- 评价的内容 -->
				<P class="userSliderComment">用户未填写评价内容</P>
			  </div>
			</van-swipe-item>
			<van-swipe-item>
			  <div class="userSlider">
				<!-- 用户名、头像、评价星级 -->
				<div class="userAvatar">
				  <label class="avatar">
					<img
					  src="https://res.vmallres.com/rms/comment/image/U0959/CB4336B4DD0969D633BAB4B47B61BB79BA8FFA21BD0FD9C7F734B1506F6F8206/E37954522CE343FB5B8EF0CB.jpg"
					  alt=""
					/>
				  </label>
				  <!-- 用户名 -->
				  <p class="p1">云***</p>
				  <!-- 星星 -->
				  <p class="p2">
					<van-icon color="#f00" name="star" />
					<van-icon color="#f00" name="star" />
					<van-icon color="#f00" name="star" />
				  </p>
				</div>
				<!-- 评价的内容 -->
				<P class="userSliderComment"
				  >质量不错，家人比较满意，下次还会买</P
				>
			  </div>
			</van-swipe-item>
		  </van-swipe>
		</div>
		<div class="commentFooter">
		  <span>查看全部评价</span>
		  <span>购买咨询(22)</span>
		</div>
	  </div>
	  <van-button type="primary" @click="addCart">加入购物车</van-button>
	  <van-action-bar>
		<van-action-bar-icon icon="chat-o" text="客服" />
		<van-action-bar-icon icon="cart-o" text="购物车" badge="" />
		<van-action-bar-icon icon="shop-o" text="店铺" badge="" />
		<van-action-bar-button
		  type="warning"
		  text="加入购物车"
		  @click="addCart"
		/>
		<van-action-bar-button type="danger" text="立即购买" @click="onsubmit"/>
	  </van-action-bar>
	</div>
  </template>
  
  <script setup lang="ts">
  import { useProduct } from "@/hooks/detail";
  import { ref } from "vue";
  import router from '@/router/index';
  const { onClickLeft, product, addCart } = useProduct();
  const countDownTime = ref(30 * 60 * 60 * 1000);
  const onsubmit = () =>{
	router.push({ path: "/checkCart" })
  }
  </script>
  
  <style scoped>
  .goods .goodsPriceLeft {
	/* width: 100%; */
	height: 90px;
	position: relative;
	background-image: linear-gradient(90deg, #ff313f 0%, #ff935a 100%);
  }
  
  .goods .goodsPriceLeft .mingzi {
	font-size: 0.4rem;
	color: #fff;
	font-weight: normal;
	position: absolute;
	top: 0.1rem;
	left: 0.5rem;
  }
  
  .goods .goodsPriceLeft .jiage {
	font-size: 0.5rem;
	color: #fff;
	font-weight: bold;
	position: absolute;
	top: 0.8rem;
	left: 0.5rem;
  }
  
  .goodsPriceRight {
	/* background-color: #fdf0e8; */
  
	width: 100%;
	height: 90px;
	overflow: hidden;
	top: 0;
	right: 0;
  }
  
  .goodsPriceRight .daojishi {
	font-size: 0.8rem;
	font-size: normal;
	color: #f00;
	display: block;
	margin: 0.3rem 0 0 0;
	text-align: center;
  }
  .van-count-down {
	text-align: center;
  }
  .countDownTime_colon {
	display: inline-block;
	margin: 0 4px;
	color: #ee0a24;
  }
  
  .countDownTime_block {
	display: inline-block;
	width: 50px;
	color: #fff;
	font-size: 21px;
	text-align: center;
	background-color: #ee0a24;
  }
  
  .commentWrap {
	margin: 0.4rem;
	padding: 0.4rem;
	background: #f5f5f5;
	text-align: left;
	border-radius: 0.3rem;
  }
  
  .commentWrap header {
	overflow: hidden;
  }
  
  .commentWrap header span.spanL {
	float: left;
	font-size: 0.5rem;
  }
  
  .commentWrap header span.spanR {
	float: right;
	color: #f00;
	font-size: 0.4rem;
  }
  
  .commentWrap header span.spanR em {
	color: rgb(150, 150, 150);
	font-size: 0.3rem;
  }
  
  div.commentWrap ul.ulTip {
	overflow: hidden;
  }
  
  div.commentWrap ul.ulTip li {
	float: left;
	margin-right: 0.3rem;
	padding: 0.1rem 0.2rem;
	background: #ddd;
	border-radius: 0.2rem;
  }
  
  div.commentWrap div.commentFooter {
	padding: 0.3rem 0;
	text-align: center;
  }
  
  div.commentWrap div.commentFooter span {
	padding: 0.2rem;
	margin-right: 0.3rem;
	background: #ddd;
	border-radius: 0.2rem;
  }
  
  /* 用户评价，轮播图的wrap容器 */
  .commentSwipeWrap {
	padding: 0.3rem 0;
  }
  
  /* 用户评价，轮播图样式 */
  .my-swipe .van-swipe-item {
	color: #fff;
	font-size: 20px;
	line-height: 150px;
	text-align: center;
	background-color: #eee;
  }
  
  /* 单个在轮播中的，用户评价 */
  .userSlider {
	width: auto;
	height: 3rem;
  }
  
  div.userAvatar {
	position: relative;
	padding: 0 0 0 1.3rem;
  }
  
  div.userAvatar label.avatar {
	position: absolute;
	top: 0;
	left: 0;
	width: 1rem;
	height: 1rem;
	display: block;
	overflow: hidden;
	border-radius: 100%;
  }
  
  div.userAvatar label.avatar img {
	width: 1rem;
  }
  
  div.userAvatar p.p1,
  div.userAvatar p.p2 {
	height: 0.5rem;
	line-height: 0.5rem;
	text-align: left;
	color: #000;
	font-size: 0.3rem;
  }
  
  div.userSlider p.userSliderComment {
	height: auto;
	color: #000;
	font-size: 0.3rem;
	line-height: 0.6rem;
	text-align: left;
  }
  </style>
  